<template>
  <div class="app-container">
    <el-empty v-if="djLx == '1' && zdUnloadStatus == '0'"
              description="当前乘客上一航班未完成，无法进行中转登机">
    </el-empty>
    <div v-else-if="show">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span class="el-tag el-tag--warning">乘客信息</span>
          <el-button v-if="this.ckInfo.boardingStatus != '1'" style="float: right;
           padding: 3px 0" type="text" @click="handleBoarding"
          >登机
          </el-button>
          <span v-else style="float: right; padding: 3px 0; font-size: 14px; color: #8B0000">已登机</span>
        </div>
        <el-descriptions title="" direction="vertical" :column="3" border>
          <el-descriptions-item label="乘客姓名">{{this.ckInfo.passengerName}}</el-descriptions-item>
          <el-descriptions-item label="手机号">{{this.ckInfo.passengerNumber}}</el-descriptions-item>
          <el-descriptions-item label="证件号">{{this.ckInfo.passengerIdCard}}</el-descriptions-item>
          <el-descriptions-item :label="djLx == '0' ? '航班号' : '中转航班号'">
            {{this.ckInfo.flightNo}}</el-descriptions-item>
        </el-descriptions>
      </el-card>
    </div>
  </div>
</template>

<script>

import { initCkxlAndPoint } from "@/api/ckxl/xl";

export default {
  name: "Boarding",
  props: ['ckInfo', 'show', "djLx",'zdUnloadStatus'],
  data() {
    return {

    };
  },
  created() {
  },
  computed:{
  },
  methods: {
    /** 登机按钮操作 */
    handleBoarding() {
      var _this = this;
      this.$modal.confirm('是否确认登机？').then(function() {
        const data = {'passengerName': _this.ckInfo.passengerName,
          'passengerIdCard': _this.ckInfo.passengerIdCard, 'djLx': _this.djLx}
        return initCkxlAndPoint(data);
      }).then(() => {
        if(_this.djLx == '0'){
          // 直达登机
          this.$emit('zd-boarding-successful', '登机成功')
        }else {
          // 中转登机
          this.$emit('zz-boarding-successful', '登机成功')
        }
      }).catch(() => {});
    },
  }
};
</script>

<style lang="scss" scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  width: 100%;
}
</style>
